<template>
  <view class="container">
    <my-navbar-top></my-navbar-top>
    <view class="goods-list">
      <!-- 搜索输入框 -->
      <view class="search-input-container" v-if="!isOpenFilter">
        <view class="search-input">
          <view class="search-input-icon">
            <image src="/static/images/search.png" mode="widthFix"></image>
          </view>
          <input
            v-model="searchValue"
            style="flex: 1; margin-left: 10rpx; margin-right: 10rpx"
            type="text"
            placeholder="请输入关键词"
            placeholder-style="color: #999;font-size: 24rpx"
            @focus="inputFocus"
          />
          <view
            class="search-input-close"
            v-if="searchValue"
            @click="handleClear"
          >
            <image src="/static/images/clear.png" mode="widthFix"></image>
          </view>
        </view>
        <!-- 搜索按钮 -->
        <view class="search-button" @click="handleSearch">搜索</view>
      </view>
      <view class="search-input-container" v-else></view>

      <!-- 筛选条件 -->
      <filter-com
        :total="total"
        :product_type_one_id="product_type_one_id"
        :category_id="category_id"
        @type="handleType"
        @price="handlePrice"
        @filter="handleFilter"
        @openStatus="handleOpenFilter"
      ></filter-com>

      <!-- 顶部弹框 -->
      <uni-popup ref="topPopup">
        <view class="search-recommend">
          <view class="search-recommend-title" v-if="searchHistory.length != 0">
            <view>历史搜索</view>
            <view class="search-recommend-del" @click="deleteHistory">
              <image src="/static/images/del.png" mode="widthFix"></image>
            </view>
          </view>
          <view class="search-recommend-list">
            <view
              class="search-recommend-item"
              v-for="item in searchHistory"
              :key="item.id"
              @click="searchByHistory(item.name)"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
      </uni-popup>

      <view class="goods-list-container">
        <view class="product-type-one" v-if="product_type_one_obj.big_image">
          <image :src="product_type_one_obj.big_image" mode="widthFix"></image>
          <text class="product-type-one-name">
            {{ product_type_one_obj.name }}{{ categoryName }}
          </text>
        </view>
        <!-- 列表 -->
        <scroll-view
          class="list"
          style="height: 100%"
          scroll-y
          @scrolltolower="handleScrollToLower"
        >
          <goods-list :list="goodsList" :isLoad="isLoad"></goods-list>
        </scroll-view>
      </view>
	  
	  <image @click="goProductType" src="/static/images/type_icon.png"  style="position: fixed;width:100rpx;height:100rpx;right: 30rpx;bottom: 250rpx;z-index:2;"></image>
    </view>
  </view>
</template>

<script>
import FilterCom from '@/components/filterCom.vue'
import GoodsList from '@/components/goods/list.vue'

export default {
  name: 'HomeList',
  components: {
    FilterCom,
    GoodsList,
  },
  data() {
    return {
      isLoad: true,
      isOpenFilter: false, // 是否打开了筛选 如果打开了筛选则隐藏搜索框
      total: 0,
      product_type_one_obj: {}, // 一级分类图片
      category_obj: {},
      product_type_one_id: '', // 一级分类id
      category_id: '', // 分类id
      searchValue: '', // 搜索关键词
      goodsList: [],

      price_top: '', // 价格上限
      price_bottom: '', // 价格下限
      page: 1,
      isEnd: false,
      type: 'all',
      price: '',
      searchHistory: [], // 搜索历史
      filter: [],
    }
  },
  computed: {
    categoryName() {
      let name =
        this.category_id.split(',').length > 1 ? '' : this.category_obj.name
      return name ? '-' + name : ''
    },
  },
  onLoad(e) {
    this.page = 1
    this.isEnd = false
    this.goodsList = []
    this.product_type_one_id = e.product_type_one_id || ''
    this.category_id = e.category_id || ''
    if (this.product_type_one_id) {
      this.$api
        .getProductImage({
          product_type_one_id: this.product_type_one_id,
        })
        .then((res) => {
          console.log('res', res)
          this.product_type_one_obj = res.data
        })
    }
    // 如果有searchValue
    if (e.search_value) {
      this.searchValue = e.search_value
    }

    if (this.category_id) {
      this.$api
        .getCategoryOne({
          category_id: this.category_id,
        })
        .then((res) => {
          console.log('res', res)
          this.category_obj = res.data
        })
    }
    this.initData(true)
  },
  methods: {
    // 打开筛选面板
    handleOpenFilter(status) {
      console.log('status', status)
      this.isOpenFilter = status
    },
    // 输入框聚焦后，展示遮罩层
    inputFocus() {
      // 获取历史搜索
      this.$api.getHistorySearch().then((res) => {
        console.log(res, 'res-历史搜索')
        this.searchHistory = res.data.history_search || []
      })
      this.$refs.topPopup && this.$refs.topPopup.open('top')
    },
    initData(init = false) {
      this.$util.showLoading()
      if (init) {
        this.page = 1
        this.isEnd = false
        this.goodsList = []
      }
      this.isLoad = true
      console.log('this.page', this.page)
      console.log('this.goodsList', this.goodsList)
      this.$refs.topPopup && this.$refs.topPopup.close()
      let o = {
        page: this.page,
        search: this.searchValue,
        type: this.type,
        is_price: this.price,
        price_top: this.price_top,
        price_bottom: this.price_bottom,
        filter: this.filter,
        product_type_one_id: this.product_type_one_id,
        category_id: this.category_id,
      }
      try {
        this.$api.getGoodList(o).then((res) => {
          if (res.code == 0) {
            let list = res.data || []
            this.isEnd = list.length === 0
            console.log('this.isEnd', this.isEnd)

            this.goodsList = this.goodsList.concat(list)
            this.total = res.count || 0

            console.log('this.goodsList', this.goodsList.length, res.count)
          }
          uni.hideLoading()
          this.isLoad = false
        })
      } catch (error) {
        uni.hideLoading()
        this.isLoad = false
      }
    },
    handleSearch() {
      this.page = 1
      this.isEnd = false
      this.goodsList = []
      this.initData(true)
    },
    handleType(type) {
      console.log('type', type)
      this.type = type
      this.price = ''
      this.initData(true)
    },
    handlePrice(price) {
      console.log('price', price)
      this.price = price
      this.type = ''
      this.initData(true)
    },
    handleFilter(filter) {
      console.log('filter', filter)
      this.filter = JSON.stringify(filter.selectedFilters)
      this.price_top = filter.price_top
      this.price_bottom = filter.price_bottom
      this.initData(true)
    },
    handleClear() {
      this.searchValue = ''
    },
    handleScrollToLower() {
      console.log('到底了')
      if (this.isEnd) return
      this.page++
      this.initData()
    },
	goProductType(){
		uni.switchTab({
		  url: '/pages/category/index',
		})	
	},
    // 删除历史搜索
    deleteHistory() {
      this.$api.delHistorySearch().then((res) => {
        console.log(res, 'res-删除历史搜索')
        if (res.code == 0) {
          this.searchHistory = []
        }
      })
    },
    // 根据历史搜索进行搜索
    searchByHistory(name) {
      this.searchValue = name
      this.handleSearch()
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
